<template>
	<view>
		<u-popup :safeAreaInsetBottom="true" :safeAreaInsetTop="true" :mode="popupData.mode" :show="show"
			:round="popupData.round" :overlay="popupData.overlay" :borderRadius="popupData.borderRadius"
			:closeable="popupData.closeable" :closeOnClickOverlay="popupData.closeOnClickOverlay" @close="close"
			@open="open" customStyle="background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);">
			<view>
				<u-row>
					<span style="margin-left: 45%;">高级功能</span>
				</u-row>

			</view>

			<view class="u-popup-slot">

				<u-cell-group>
					<u-cell title="路况自适应">
						<u-switch v-model="advancedData.roadStaus" slot="value" class="u-slot-value"
							@change="roadChange"></u-switch>
					</u-cell>
					<u-cell title="车身自适应">
						<u-switch v-model="advancedData.speedStatus" slot="value" class="u-slot-value"
							@change="roadChange"></u-switch>
					</u-cell>
					<u-cell title="防侧倾">
						<u-switch v-model="advancedData.antiRoll" slot="value" class="u-slot-value"
							@change="roadChange"></u-switch>
					</u-cell>
					<u-cell title="刹车防点头">
						<u-switch v-model="advancedData.breakNode" slot="value" class="u-slot-value"
							@change="roadChange"></u-switch>
					</u-cell>
				</u-cell-group>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			advancedData: {
				type: Object, // 根据需要调整类型
				default: undefined // 默认值
			}
		},
		data() {
			return {
				show: false,
				popupData: {
					overlay: true,
					mode: 'bottom',
					borderRadius: '10',
					closeable: true,
					closeOnClickOverlay: true,
					round: 10
				},
				revertData: {},
				roadStaus: false,
				speedStatus: false,
				antiRoll: false,
				breakNode: false
			}
		},
		methods: {
			open() {
				this.show = true
			},
			close() {
				this.show = false
				// console.log('close');
			},
			roadChange() {
				let roadStaus = this.advancedData.roadStaus;
				let speedStatus = this.advancedData.speedStatus;
				let antiRoll = this.advancedData.antiRoll;
				let breakNode = this.advancedData.breakNode;
				let arr = [breakNode, antiRoll, speedStatus, roadStaus];
				let cmd = '';
				if (breakNode == true) {
					cmd = cmd + '1';
				} else {
					cmd = cmd + '0';
				}
				if (antiRoll == true) {
					cmd = cmd + '1';
				} else {
					cmd = cmd + '0';
				}

				if (speedStatus == true) {
					cmd = cmd + '1';
				} else {
					cmd = cmd + '0';
				}

				if (roadStaus == true) {
					cmd = cmd + '1';
				} else {
					cmd = cmd + '0';
				}
				this.$emit("pAdvancedData", cmd);
			}
		}
	}
</script>

<style lang="scss">
	.u-popup-slot {
		width: 100%;
		height: 250px;
		@include flex;
		justify-content: center;
		align-items: center;
	}
</style>